<template>


	<view class="">
		<view class="title">
			<alltitleVue :title="title" :url="url" />
		</view>

		<view class="container">

			<view class="box">

				<view class="form-item">
					<view class="input-box">
						<text class="label">收货人</text>
						<input v-model="address.name" :class="{'has-value': address.name}" class="input ease"
							placeholder="请输入收货人姓名" />
					</view>

				</view>

				<view class="form-item">
					<view class="input-box">
						<text class="label">手机号码</text>

						<input v-model="address.mobile" :class="{'has-value': address.mobile}" class="input ease"
							type="number" placeholder="请输入手机号码" />
					</view>

				</view>

				<view class="form-item">
					<u-picker v-model="show" confirm-color='#CCA566' mode="region" @confirm="selectDistrict"></u-picker>
					<view class="input-box picker-box" @click="show = true">
						<view class="input-box">
							<text class="label">所在地区</text>
							<view class="ease" :class="{'has-value': address.shippingAddress!='选择省/市/区'}">
								<text>{{address.shippingAddress}}</text>
							</view>
						</view>
						<image class="right-img" :src="right" mode=""></image>

					</view>
				</view>

				<view class="form-item form-items">
					<view class="input-box">
						<text class="label">详细地址</text>
						<input v-model="address.address" :class="{'has-value': address.address}" class="input ease"
							placeholder="请输入详细地址" />

					</view>

				</view>
			</view>


			<view class="box">
				<!-- 地址标签部分 -->
				<view class="form-item">
					<view class="input-box">
						<text class="label">地址标签</text>
						<view class="tag-container">
							<view class="tag" :class="{'tag-selected': address.labels === '家'}"
								@click="selectLabel('家')">
								家
							</view>
							<view class="tag" :class="{'tag-selected': address.labels === '公司'}"
								@click="selectLabel('公司')">
								公司
							</view>
							<view class="tag" :class="{'tag-selected': address.labels === '学校'}"
								@click="selectLabel('学校')">
								学校
							</view>
						</view>
					</view>
				</view>

				<!-- 默认地址开关选择器 -->
				<view class="form-item switch-box form-items">
					<text class="switch-text">设置为默认地址</text>
					<view class="checkbox" :class="{'address-checkbox':address.isDefault}"
						@click.top="toggleItemSelection">
						<image v-if="address.isDefault" :src="bg" mode=""></image>

					</view>
					<!-- <u-switch @change="onchange" v-model="address.isDefault" size="28"
						active-color="#CCA566"></u-switch> -->
				</view>
			</view>

			<view class="bot">
				<view @click="saveAddress" class="submit-btn">保存地址</view>
			</view>



		</view>
	</view>
</template>

<script>
	import config from "../../utils/config";
	import {
		addAddress
	} from '../../service/api.js'
	export default {
		data() {
			return {
				title: "添加地址",
				show: false,
				right: config.ossHost + "2025/01/09/ee1bcb20aa0b4ae5a14ad5dce09c3ba6.png",
				bg: config.ossHost + '2025/01/03/b7e97ec044a3427180a2b3d13ffb10b2.png',
				address: {
					shippingAddress: "选择省/市/区",
					name: '',
					mobile: '',
					//省
					province: '',
					//市
					city: "",
					//区
					area: "",

					address: '',
					labels: '', // 地址标签
					isDefault: 0, // 默认地址
				},
				formError: false, // 表单是否有错误
			}
		},
		methods: {
			onchange(e) {

				if (e) {
					this.address.isDefault = 1;
				} else {
					this.address.isDefault = 0;
				}

			},
			toggleItemSelection() {
				if (this.address.isDefault) {
					this.address.isDefault = 0
				} else {
					this.address.isDefault = 1
				}

			},
			//选中地区
			selectDistrict(item) {

				this.address.province = item.province.value;
				this.address.city = item.city.value;
				this.address.area = item.area.value;
				this.address.shippingAddress = item.province.label + ' ' + item.city.label + " " + item.area.label
			},

			selectLabel(label) {
				this.address.labels = label;
			},
			async saveAddress() {
				// 校验必填项
				this.formError = false;

				// 检查必填项是否填写
				if (!this.address.name || !this.address.mobile || this.address.shippingAddress.length === 0 || !this
					.address
					.address) {
					this.formError = true;
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}

				// 手机号格式验证
				const mobileReg = /^1[3-9]\d{9}$/; // 匹配中国大陆手机号码
				if (!mobileReg.test(this.address.mobile)) {
					this.formError = true;
					uni.showToast({
						title: '请输入有效的手机号码',
						icon: 'none'
					});
					return;
				}
				let res = await addAddress(this.address);
				if (res.code == 200) {
					// 提交成功
					uni.showToast({
						title: '地址保存成功',
						icon: 'success'
					});
					uni.navigateBack({
						delta: 1,
					});
				}

			}
		}
	};
</script>

<style lang="scss" scoped>
	.title {
		background: #fff;
	}

	.box {
		padding: 24rpx;
		margin: 0 24rpx;
		background: #fff;
		border-radius: 16rpx;
		margin-top: 24rpx;
	}

	.container {

		// padding: 20rpx;
		.form-item {
			border-bottom: 1rpx solid #E6E6E6;
			padding-bottom: 20rpx;

			.switch-text {
				font-size: 24rpx;
				font-weight: bold;
				color: #4D4D4D;
			}

			.input-box {
				display: flex;
				align-items: center;
			}

			margin-bottom: 24rpx;
		}

		.form-items {
			margin-bottom: 0;
			border: none;
		}

		.switch-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.label {
			display: inline-block;
			width: 100rpx;
			font-size: 24rpx;
			font-weight: bold;
			margin-right: 48rpx;
			color: #4D4D4D;
		}

		.input {
			color: #B3B3B3;
			font-size: 24rpx;


		}
	}



	.tag-container {
		display: flex;

	}

	.tag {
		margin-right: 32rpx;
		padding: 3rpx 16rpx;
		background-color: #f0f0f0;
		border-radius: 20rpx;
		font-size: 24rpx;
		/* color: #333; */
		cursor: pointer;
		color: #808080;
	}

	.tag-selected {
		background-color: #CCA566;
		color: white;
	}

	.submit-btn {
		width: 100%;

		height: 80rpx;
		background: #CCA566;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
		color: #fff;
		font-size: 32rpx;

		font-size: 18px;
		border-radius: 4px;
		cursor: pointer;
	}

	.submit-btn:active {
		background-color: #45a049;
	}

	.picker-box {
		display: flex;
		align-items: center;
		justify-content: space-between;

		.ease {
			font-size: 24rpx;
			color: #B3B3B3;
		}
	}

	.bot {
		position: fixed;
		width: 702rpx;
		height: 120rpx;
		padding: 24rpx;
		background: #fff;
		bottom: 0;
	}

	.has-value {
		font-weight: bold;
		font-size: 24rpx;
		color: #1A1A1A !important;
	}

	.checkbox {
		width: 31rpx;
		height: 31rpx;
		/* background: #808080; */
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		border: 1rpx solid #808080;

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.address-checkbox {
		border: none;
	}
</style>